.entrance {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('./images/entrance/bg.png');
  background-size: 100% 100%;
  width: 100%;
  height: 80vh;
  .numAnimate {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 40 / 2;
    margin-left: 50 / 2;
    z-index: 10;
  }
  .outerCirle {
    position: relative;
    width: 84%;
    height: 100%;
    margin: 0 auto;
    background: url('./images/entrance/outerCircle.png') no-repeat;
    background-position: center center;
    background-size: 100% auto;
    .innerCircleBig {
      width: 40%;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20%;
      margin-left: -20%;
      img {
        width: 100%;
      }
      animation: rotate 10s linear infinite reverse;
    }
    .innerCircleSmall {
      width: 36%;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -18%;
      margin-left: -18%;
      img {
        width: 100%;
      }
      animation: rotate 10s linear infinite;
    }
    .content {
      width: 36%;
      position: absolute;
      top: 16%;
      left: 32%;
      .title {
        width: 94%;
        margin: 25vh auto 0 auto;
        img {
          width: 100%;
        }
      }
      .entranceBtns {
        position: relative;
        display: block;
        width: 50%;
        margin: 12vh auto 0 auto;
        z-index: 100;
        width: 100%;
        text-align: center;
        img {
          width: 30%;
          &:nth-child(1) {
            margin-left: 10px;
          }
        }
      }
    }
  }
  .buttom {
    width: 10%;
    position: absolute;
    left: 50%;
    bottom: 3%;
    margin-left: -5%;
    z-index: 10;
    img {
      width: 100%;
    }
  }
  .pngLists {
    position: absolute;
    width: 100%;
    height: 100%;
    .png {
      width: 100%;
      height: 100%;
    }
    .businessPng {
      position: absolute;
      width: 12%;
      height: 36%;
      top: 11%;
      right: 12%;
    }
    .lawPng {
      position: absolute;
      width: 12%;
      height: 36%;
      top: 12%;
      left: 13%;
    }
    .politcalPng {
      position: absolute;
      width: 12%;
      height: 36%;
      top: 60%;
      left: 11%;
    }
    .socialPng {
      position: absolute;
      width: 12%;
      height: 36%;
      top: 63%;
      right: 11%;
    }
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
